<template>
    <div class="totalStyle"  >
        <el-table
                :data="aphorismsData"
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="aphorisms"
                    label="对自己说的话"
                    header-align="center"
                    style="width: 100%;">
            </el-table-column>

        </el-table>
    </div>
</template>

<script>
    export default {
        name: "FrontFrameLeftArea",
        data(){
            return{
                aphorismsData:[         //名言警句
                    {aphorisms:"在人生的旅途中，不要害怕追求你的梦想，不要害怕面对困难和挑战，因为这些都是塑造你成为更强大、更勇敢、更成功的人的机会。"},
                    {aphorisms:"每一次的失败都是通往成功的一步，不要害怕失败，因为失败是成功的教科书，只有经历过失败，才能真正明白成功的珍贵。"},
                    {aphorisms:"坚持不懈，直到梦想成真。无论遇到多大的困难和挫折，都要坚持下去，因为只有坚持到最后，才能看到成功的曙光。"},
                    {aphorisms:"勇气是迈向成功的第一步。不要害怕冒险，不要害怕尝试新的事物，因为只有勇敢地迈出第一步，才能开启成功的大门。"},
                    {aphorisms:"没有付出就没有收获，只有努力才能实现梦想。不要羡慕别人的成功，不要抱怨自己的不幸，因为只有付出足够的努力，才能收获成功的果实。"},
                ],
            }
        },
        methods:{
            //为行增加高亮状态
            tableRowClassName({row, rowIndex}) {
                row;
                rowIndex+=1;
                if (rowIndex === 1) {
                    return 'rowStyle-1';
                } else if (rowIndex === 2) {
                    return 'rowStyle-2';
                }else if (rowIndex === 3) {
                    return 'rowStyle-3';
                } else if (rowIndex === 4) {
                    return 'rowStyle-4';
                }else if(rowIndex === 5){
                    return 'rowStyle-5';
                }
                return '';
            },




        },
    }
</script>

<style scoped>

    .totalStyle{
        height: 541px;
        width: 310px;
        position: fixed;
    }

    /deep/ .el-table .rowStyle-1 {
        background: oldlace;
    }

    /deep/ .el-table .rowStyle-2 {
        background: #ddf0a9e0;

    }

    /deep/ .el-table .rowStyle-3 {
        background: #e6f4fdbd;
    }

    /deep/ .el-table .rowStyle-4 {
        background: #d3b8e6c4;
    }

    /deep/ .el-table .rowStyle-5 {
        background: #7139411a;
    }

    /deep/ .tableHeaderCellStyle {
        text-align: center;
    }




</style>